
<style>
.page {
  text-align: center;
  margin-top: 40px;
}
.cc {
  text-align: center;
  margin-top: 40px;
}
.page1 {
  margin-top: 15px;
  margin-left: 15px;
  float: none;
}
.a11 {
  margin-top: 10px;
}
.page2 {
  text-align: center;
  margin-top: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  table-layout: fixed;
}
.page4 {
  float: left;
  margin-top: 15px;
  margin-left: 15px;
}
.page14 {
  float: left;
  margin-top: 15px;
}
.ivu-table-overflowX {
  overflow-x: hidden;
}
.demo-drawer-profile {
  font-size: 14px;
}
.demo-drawer-profile .ivu-col {
  margin-bottom: 12px;
}
.myrole {
  margin-left: 10px;
}
.in1 {
  margin-left: 14px;
}
.container {
  padding: 10px;
}

h2 {
  text-align: center;
}
/* radio每个选项一行显示 */
.el-radio {
  float: none;
  white-space: normal;
  line-height: 23px;
  display: block;
  margin-left: 20px;
}
</style>
<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/main/myInfo">
        <e-icon icon-name="el-icon-s-home"></e-icon>主页
      </BreadcrumbItem>
      <BreadcrumbItem>
        <e-icon icon-name="fa fa-thumbs-o-up"></e-icon>评价管理
      </BreadcrumbItem>
      <BreadcrumbItem> 学生评教管理 </BreadcrumbItem>
    </Breadcrumb>
    <Divider />

    <Select
      class="in1"
      style="width: 200px"
      v-model="evaluateTaskId"
      placeholder="请选择评价任务"
      clearable
    >
      <Option
        v-for="sli in allEvaluateTask"
        :key="sli.id"
        :label="sli.value"
        :value="sli.id"
      ></Option>
    </Select>
    <Button class="in1" type="primary" icon="ios-search" @click="getRecords"
      >刷新</Button
    >

    <Table
      style="width: 100%"
      context-menu
      show-context-menu
      class="page1"
      border
      :columns="columns1"
      :data="data.records"
      :loading="loading"
    >
    </Table>

    <Page
      class="cc"
      :total="data.total"
      :current="data.current"
      :page-size="6"
      :page-size-opts="pagesizeopts"
      @on-change="changePage"
      @on-page-size-change="sizeChange"
      show-elevator
      show-total
      show-sizer
    />
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :title="dialogTitle"
    >
      <el-row>
        <el-col :span="6"> 评教类型：学生评教 </el-col>
        <el-col :span="6"> 教师：{{ formData.teacherName }} </el-col>
        <el-col :span="6"> 班级：{{ formData.clazzName }} </el-col>
        <el-col :span="6"> 课程：{{ formData.courseName }} </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="formData" :model="formData">
        <div v-for="(targetVo, index) in evaluateTargetVoList" :key="index">
          <h4>{{ targetVo.name }}</h4>
          <el-form-item v-if="targetVo.evaluateTargetOptionList.length > 0">
            <el-radio-group v-model="formData.optionIdList[index]">
              <el-radio
                v-for="option in targetVo.evaluateTargetOptionList"
                :key="option.id"
                :label="option.id"
                :disabled="saveFlag === false"
                >{{ option.content }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <Button size="large" @click="closeDialog">关闭</Button>
        <Button size="large" @click="save" v-if="saveFlag" type="primary"
          >保存</Button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "studentIndex",
  created() {
    this.getAllEvaluateTask();
    this.getEvaluateTargetVoList();
    this.getRecords();
  },
  data() {
    return {
      loading: false, // 后台忙标志
      data: {}, //表格数据
      dialogTitle: "",
      dialogVisible: false,
      saveFlag: false,
      records: null, // 表格数据集
      pageIndex: 1, // 分页参数--页号
      pageSize: 10, // 分页参数--每页行数
      total: 0, // 分页参数--总行数
      //每页展示条数
      pagesizeopts: [6, 10, 15, 20],
      allEvaluateTask: [], // 评教任务备选项
      evaluateTaskId: null, // 评教任务选中项
      evaluateTypeId: 1, // 评教类型
      sysUserId: this.$store.state.myInfo.id, // 评教人 TODO: 采用登录用户
      evaluateTargetVoList: [], // 评教指标(叶子指标含备选项)
      formData: {
        clazzId: null, // 班级
        clazzName: "",
        courseId: null, // 课程
        courseName: "",
        teacherId: null, // 被评价人,即教师
        teacherName: "",
        optionIdList: [], // 选中的备选项
        targetIdList: [], // 备选项隶属指标
      },
      //评价任务的表格
      columns1: [
        {
          title: "班级",
          key: "clazzName",
          width: 260,
        },
        {
          title: "课程",
          key: "courseName",
          width: 260,
        },
        {
          title: "教师",
          key: "teacherName",
          width: 260,
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let op = params.row.op;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",

                    icon: "md-create",
                  },
                  style: {
                    id: "btn1",
                    marginLeft: "20px",
                    display: op === 1 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doEvaluate(params.row, "评教");
                    },
                  },
                },
                "评教"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",

                    icon: "md-glasses",
                  },
                  style: {
                    marginLeft: "20px",
                    display: op === 2 ? "inline-block" : "none",
                  },
                  on: {
                    click: () => {
                      this.doDetails(params.row, "评教记录详情");
                    },
                  },
                },
                "详情"
              ),
              h(
                "Tag",
                {
                  style: {
                    marginLeft: "20px",
                    display: op === 0 ? "inline-block" : "none",
                  },
                },
                "暂无评教任务"
              ),
            ]);
          },
        },
      ],
    };
  },
  methods: {
    //获取评教指标数
    getEvaluateTargetVoList() {
      this.loading = true;
      this.$axios
        .get("/evaluateRecord/listEvaluateTargetVoListByEvaluateTypeId", {
          params: {
            evaluateTypeId: this.evaluateTypeId,
          },
        })
        .then((result) => {
          this.evaluateTargetVoList = result.data.data;
          // 准备需提交targetIdList(即有备选项目的指标)
          this.evaluateTargetVoList.forEach((targetVo) => {
            if (targetVo.evaluateTargetOptionList.length > 0) {
              this.formData.targetIdList.push(targetVo.id);
            }
          });
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取任务列表
    getAllEvaluateTask() {
      this.loading = true;
      this.$axios
        .get("/evaluateRecord/listAllEvaluateTask")
        .then((result) => {
          this.allEvaluateTask = result.data.data;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取表格数据
    getRecords() {
      this.loading = true;
      var qo = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        evaluateTaskId: this.evaluateTaskId,
        sysUserId: this.sysUserId,
      };
      this.$axios
        .post("/evaluateRecord/listPagedStudentEvaluate", qo)
        .then((result) => {
          this.data = result.data.data;
          this.records = result.data.data.records;
          this.total = result.data.data.total;
          this.formData.optionIdList = [];
          console.log(this.data);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeDialog() {
      this.dialogVisible = false;
      this.formData.optionIdList = [];
    },
    doEvaluate(row, title) {
      this.saveFlag = true;
      this.dialogVisible = true;
      this.dialogTitle = title;
      this.formData.clazzId = row.clazzId;
      this.formData.clazzName = row.clazzName;
      this.formData.courseId = row.courseId;
      this.formData.courseName = row.courseName;
      this.formData.teacherId = row.teacherId;
      this.formData.teacherName = row.teacherName;
      this.formData.optionIdList = [];
    },
    doDetails(row, title) {
      this.saveFlag = false;
      this.dialogVisible = true;
      this.dialogTitle = title;
      this.formData.clazzId = row.clazzId;
      this.formData.clazzName = row.clazzName;
      this.formData.courseId = row.courseId;
      this.formData.courseName = row.courseName;
      this.formData.teacherId = row.teacherId;
      this.formData.teacherName = row.teacherName;
      this.formData.optionIdList = row.optionIdList;
      console.log(row);
    },
    save() {
      for (var i = 0; i < this.formData.optionIdList.length; i++) {
        if (
          this.formData.optionIdList[i] == undefined ||
          this.formData.optionIdList[i] == null
        ) {
          this.$message.error({
            offset: 60,
            message: "第" + (i + 1) + "个评价指标您还没评价",
          });
          return;
        }
      }
      if (
        this.formData.optionIdList.length < this.formData.targetIdList.length
      ) {
        this.$message.error({
          offset: 60,
          message: "请完成所有评教选项后再提交评价结果",
        });
        return;
      }

      this.loading = true;
      var po = [];
      this.formData.targetIdList.forEach((targetId, i) => {
        po.push({
          evaluateTaskId: this.evaluateTaskId,
          evaluateTypeId: this.evaluateTypeId,
          sysUserId: this.sysUserId,
          clazzId: this.formData.clazzId,
          courseId: this.formData.courseId,
          teacherId: this.formData.teacherId,
          evaluateTargetId: targetId,
          evaluateTargetOptionId: this.formData.optionIdList[i],
        });
      });
      this.$axios
        .post("/evaluateRecord/saveRecord", po)
        .then((result) => {
          if (result.data.code == 0) {
            this.dialogVisible = false;
            this.$Message.success({
              top: 30,
              duration: 2.5,
              background: true,
              content: "评教成功",
            });
            this.getRecords();
          } else {
            this.$Message.error({
              top: 30,
              duration: 2.5,
              background: true,
              content: result.data.msg,
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变页数时
    changePage(e) {
      //变更查询时的页数条件
      this.pageIndex = e;
      this.getRecords();
    },
    sizeChange(e) {
      this.pageSize = e;
      this.getRecords();
    },
  },
};
</script>